<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>系统介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/animate.min.css" th:href="@{/css/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <link href="../static/css/kjfw.css" th:href="@{/css/kjfw.css}" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        .active{
            background-color: #1e9fff!important;
            border-radius: 10px!important;
        }
        .active a{
            border: 0!important;
            color: #fff!important;
        }
        li a {
            color: #626263!important;
        }
        .panel-title a {
            color: #8c8c8c!important;
        }
        .panel-title i{float: right;font-size: 20px;margin-top: -5px;}
        .fa-star{
         color: #f00;
        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <!--        顶部区域-->
        <div class="col-sm-12">
            <div class="ibox float-e-margins" >
                <div class="ibox-title_1">
                    <ul id="myTab" class="nav nav-tabs">
                        <li class="active">
                            <a href="#c_all" data-toggle="tab">全部</a>
                        </li>
                        
                        <li th:each="m:${fMenus}">
                            <a  th:href="${'#c_'+ m.menuId}" data-toggle="tab" th:text="${m.menuName}"></a>
                        </li>
                        
                         <li class="">
                            <a href="#c_sc" data-toggle="tab">我的收藏</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

<!--        标签主体-->
        <div id="myTabContent" class="tab-content">
            <!--        全部-->
            <div class="tab-pane fade in active" id="c_all"  >
                    <!--每一个模块-->
                <div class="col-sm-3 modalPanel" th:each="m:${all}">
                    <div class="ibox-content no-padding">
                        <div class="panel-body">
                            <div class="panel-group">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h5 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#version" href="#v40" th:text="${m.menuName}"></a>
                                            <i  th:class="${#lists.contains(scIds,m.menuId)}?'fa fa-star':'fa fa-star-o' "  name="scnMenu" th:attr="data-menuid=${m.menuId}"></i>
                                        </h5>
                                    </div>
                                    <div  class="panel-collapse collapse in">
                                        <div class="panel-personal">
                                            <img src="../static/img/menu.png"  th:src="(${#strings.isEmpty(m.imgUrl)}) ? @{/img/menu.png} : @{${m.imgUrl}}" alt="" style="width: 50px;border-radius: 50%;height: 50px;">
                                            <div class="right">
                                                <span>访问量
                                                    <strong th:text="${m.visits}"></strong>
                                                </span>
                                                <button name="menuBut" th:attr="data-name=${m.menuName},data-url=${m.url}"> 办理</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
               <!--每一个模块 -->
               <div class="tab-pane fade in" th:each="maps,mStat:${dmap}" th:id="${'c_'+mStat.current.key}">
                    <!--每一个模块-->
                <div class="col-sm-3 modalPanel" th:each="m:${mStat.current.value}">
                        <div class="ibox-content no-padding">
                            <div class="panel-body">
                                <div class="panel-group">
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h5 class="panel-title">
                                                <a data-toggle="collapse" data-parent="#version" href="#v40" th:text="${m.menuName}"></a>
                                                <i th:class="${#lists.contains(scIds,m.menuId)}?'fa fa-star':'fa fa-star-o' " name="scnMenu" th:attr="data-menuid=${m.menuId}"></i>
                                            </h5>
                                        </div>
                                        <div  class="panel-collapse collapse in">
                                            <div class="panel-personal">
                                                <img src="../static/img/menu.png"  th:src="(${#strings.isEmpty(m.imgUrl)}) ? @{/img/menu.png} : @{${m.imgUrl}}" alt="" style="width: 50px;border-radius: 50%;height: 50px;">
                                                <div class="right">
                                                    <span>访问量
                                                        <strong th:text="${m.visits}"></strong>
                                                    </span>
                                                    <button name="menuBut"  th:attr="data-name=${m.menuName},data-url=${m.url}" >办理</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
          
          <!-- 我的收藏 -->
           <div class="tab-pane fade in" id="c_sc">
                <div class="col-sm-3 divPanel" th:each="m:${fastMenus}">
                    <div class="ibox-content no-padding">
                        <div class="panel-body">
                           <!--  <i class="fa fa-star-o collect-button" name="scMenu" th:attr="data-menuid=${m.menuId}" ></i> -->
                            <div class="panel-group" >
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h5 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#version" href="#v40" th:text="${m.menuName}"></a>
                                            <i class="fa fa-trash" name="scMenu" th:attr="data-menuid=${m.menuId}" title="取消收藏"></i>
                                        </h5>
                                    </div>
                                    <div  class="panel-collapse collapse in">
                                        <div class="panel-personal">
                                            <img src="../static/img/menu.png"  th:src="(${#strings.isEmpty(m.imgUrl)}) ? @{/img/menu.png} : @{${m.imgUrl}}" alt="" style="width: 50px;border-radius: 50%;height: 50px;">
                                            <div class="right">
                                                    <span>访问量
                                                        <strong th:text="${m.visits}"></strong>
                                                    </span>
                                                <button name="menuBut" th:attr="data-name=${m.menuName},data-url=${m.url}"  >办理</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> 
    </div>
</div>
<script th:inline="javascript"> var ctx = [[@{/}]];</script>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ruoyi/js/common.js}"></script>
<script>
    $(function(){
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            // 获取已激活的标签页的名称
            var activeTab = $(e.target).text();
            // 获取前一个激活的标签页的名称
            var previousTab = $(e.relatedTarget).text();
            $(".active-tab span").html(activeTab);
            $(".previous-tab span").html(previousTab);
        });
        
        //跳转按钮
        $('#myTabContent').delegate("[name=menuBut]","click",function(){
      	  var url=$(this).attr("data-url");
      	  var name=$(this).attr("data-name");
      	  $.modal.openTab(name, url);
        });
        
    });
    
    
    
    function shouchang(status,menuId,$dom){
    	 var index= layer.load(1, {
	   		  shade: [0.1,'#fff'] //0.1透明度的白色背景
	   	 });
    	  $.post(ctx+'system/favorite/sccd',{menuId:menuId},function(res){
      		  layer.close(index);
      		  if(res.code==0){
      			  if(status=="1"){
      			      $.modal.alertSuccess('收藏成功！');
      			  }else{
      				  $.modal.alertSuccess('取消收藏成功！');
      				 $dom.remove();
      			  }
      		  }else{
      			  $.modal.alertError('操作失败，请联系管理员！');
      		  }
      	  });
    }
    
    //点击取消收藏按钮
    $('#myTabContent').delegate("[name=scMenu]","click",function(e){
  	   e.stopPropagation();
  	   var menuId =$(this).attr("data-menuid");
       shouchang("0",menuId,$(this).parents(".divPanel"));
       other("0", menuId);
    });
    
    //点击收藏按钮
    $('#myTabContent').delegate("[name=scnMenu]","click",function(e){
  	  e.stopPropagation();
  	 var index= layer.load(1, {
  		  shade: [0.1,'#fff'] //0.1透明度的白色背景
  	 });
  	  var id=$(this).attr("data-menuId");
  	  var _this=$(this);
  	  $.post(ctx+'system/favorite/sccd',{menuId:id},function(res){
  		  layer.close(index);
  		  if(res.code==0){
  		      if(_this.hasClass('fa-star-o')){
  			      other("1",id);
  		          $.modal.alertSuccess('收藏成功！');
  				  _this.removeClass('fa-star-o').addClass('fa-star');

  				  // 添加元素
                  var addHtml = _this.parents(".modalPanel").html();
                  $("#c_sc").append("<div class=\"col-sm-3 modalPanel\" >"+addHtml+"</div>");
                  $('#c_sc').find('.modalPanel').each(function () {
                      $(this).removeClass('modalPanel').addClass('divPanel');
                      $(this).find('.fa-star').removeClass('fa-star').addClass('fa-trash');
                  });
  			  }else{
                  other("0",id);
  		          $.modal.alertSuccess('取消收藏成功！');
  				  _this.removeClass('fa-star').addClass('fa-star-o');
  				  // 删除元素
                  $('.fa-trash').each(function () {
                      var $thisId =$(this).attr("data-menuid");
                      if($thisId==id){
                          $(this).parents(".divPanel").remove();
                      }
                  });
  			  }
  		  }else{
  			  $.modal.alertError('操作失败，请联系管理员！');
  		  }
  		  
  	  });
    });

    function other(status,menuId){
        if (status=="1"){
            // 收藏
            // 循环整个其它元素
            $('.fa-star-o').each(function () {
                var $thisId =$(this).attr("data-menuid");
                if($thisId==menuId){
                    $(this).removeClass('fa-star-o').addClass('fa-star');
                }
            });
        }else {
            $('.fa-star').each(function () {
                var $thisId =$(this).attr("data-menuid");
                if($thisId==menuId){
                    $(this).removeClass('fa-star').addClass('fa-star-o');
                }
            });
        }
    }
</script>
</body>
</html>
